<template>
  <div class="mainContent">
    <a-spin :spinning="spinning">
      <div
        style="display:flex;justify-content: center;flex-direction: column;width:100%;margin:0 auto;"
      >
        <div>
          <a-card class="card_sty" title="基本信息" :headStyle="headStyle">
            <a-card-grid class="tabClass_lf">客户类型</a-card-grid>
            <a-card-grid class="tabClass_rt">
              <span v-if="agentInfoDTO.merchantType=='org'">企业客户</span>
              <span v-if="agentInfoDTO.merchantType=='mer'">个体工商户</span>
            </a-card-grid>

            <a-card-grid class="tabClass_lf">客户名称</a-card-grid>
            <a-card-grid class="tabClass_rt">{{ agentInfoDTO.merchantName }}</a-card-grid>
            <a-card-grid class="tabClass_lf">客户简称</a-card-grid>
            <a-card-grid class="tabClass_rt">{{ agentInfoDTO.shortName }}</a-card-grid>
            <a-card-grid class="tabClass_lf">社会统一信用代码/注册号</a-card-grid>
            <a-card-grid class="tabClass_rt">
              <a-hide-data :params="{type:'idCard',value: agentInfoDTO.orgRegisterNo}"></a-hide-data>
            </a-card-grid>
            <a-card-grid class="tabClass_lf">营业期限</a-card-grid>
            <a-card-grid class="tabClass_rt">
              {{agentInfoDTO.orgExpiryDateStart}}
              至{{agentInfoDTO.orgExpiryDateEnd}}
            </a-card-grid>
            <a-card-grid class="tabClass_lf">营业地址</a-card-grid>
            <a-card-grid class="tabClass_rt">
              {{agentInfoDTO.realProvinceName}}
              -{{agentInfoDTO.realCityName}}-{{agentInfoDTO.realDistrictName}}-{{agentInfoDTO.realAddress}}
            </a-card-grid>
          </a-card>

          <a-card class="card_sty" title="联系人信息" :headStyle="headStyle">
            <a-card-grid class="tabClass_lf">姓名</a-card-grid>
            <a-card-grid class="tabClass_rt">
              <a-hide-data :params="{type:'idName',value:agentInfoDTO.contactName}"></a-hide-data>
            </a-card-grid>
            <a-card-grid class="tabClass_lf">联系电话</a-card-grid>
            <a-card-grid class="tabClass_rt">
              <a-hide-data :params="{type:'mobileNo',value:agentInfoDTO.contactPhone}"></a-hide-data>
            </a-card-grid>
            <a-card-grid class="tabClass_lf">Email</a-card-grid>
            <a-card-grid class="tabClass_rt">
              <a-hide-data :params="{type:'email',value:agentInfoDTO.contactEmail}"></a-hide-data>
            </a-card-grid>
          </a-card>
          <a-card
            v-if="legal!=null"
            class="card_sty"
            title="法定代表人信息"
            :headStyle="headStyle"
          >
            <a-card-grid class="tabClass_lf">姓名</a-card-grid>
            <a-card-grid class="tabClass_rt">
              <a-hide-data :params="{type:'idName',value:legal.identityName}"></a-hide-data>
            </a-card-grid>
            <a-card-grid class="tabClass_lf">姓名</a-card-grid>
            <a-card-grid class="tabClass_rt">身份证</a-card-grid>
            <a-card-grid class="tabClass_lf">证件号码</a-card-grid>
            <a-card-grid class="tabClass_rt">
              <a-hide-data :params="{type:'idCard',value:legal.identityNo}"></a-hide-data>
            </a-card-grid>
            <a-card-grid class="tabClass_lf">证件有效期</a-card-grid>
            <a-card-grid class="tabClass_rt">{{legal.expiryDate}}</a-card-grid>
          </a-card>
          <a-card class="card_sty" title="上级信息" :headStyle="headStyle">
            <a-card-grid class="tabClass_lf">合作机构号</a-card-grid>
            <a-card-grid class="tabClass_rt">{{ agentInfoDTO.parentAgentCode }}</a-card-grid>
            <a-card-grid class="tabClass_lf">客户名称</a-card-grid>
            <a-card-grid class="tabClass_rt">{{ agentInfoDTO.parentMerchantName }}</a-card-grid>
           <a-card-grid class="tabClass_lf">联系方式</a-card-grid>
            <a-card-grid class="tabClass_rt">{{ agentInfoDTO.parentContactPhone }}</a-card-grid>
          </a-card>
          <a-card
            v-if="bank!=null"
            class="card_sty"
            title="结算账户信息"
            :headStyle="headStyle"
          >
            <a-card-grid class="tabClass_lf">账户类型</a-card-grid>
            <a-card-grid class="tabClass_rt">
              <span v-if="bank.isPrivate==false">对公</span>
              <span v-if="bank.isPrivate==true">对私</span>
            </a-card-grid>

            <a-card-grid class="tabClass_lf">账户名称</a-card-grid>
            <a-card-grid class="tabClass_rt">
              <a-hide-data :params="{type:'idName',value:bank.accountName}"></a-hide-data>
            </a-card-grid>
            <a-card-grid class="tabClass_lf">开户行名称</a-card-grid>
            <a-card-grid class="tabClass_rt">{{bank.bankName}}</a-card-grid>
            <a-card-grid class="tabClass_lf">开户行所在地</a-card-grid>
            <a-card-grid class="tabClass_rt">{{bank.province}} - {{bank.city}}</a-card-grid>

            <a-card-grid class="tabClass_lf">账号</a-card-grid>
            <a-card-grid class="tabClass_rt">
              <a-hide-data :params="{type:'bankCard',value:bank.cardNo}"></a-hide-data>
            </a-card-grid>
            <a-card-grid v-if="bank.isPrivate==false" class="tabClass_lf">联系人手机号</a-card-grid>
            <a-card-grid v-if="bank.isPrivate==false" class="tabClass_rt">
              <a-hide-data :params="{type:'mobileNo',value:bank.mobileNo}"></a-hide-data>
            </a-card-grid>
          </a-card>

          <a-card
            v-if="agentInfoDTO.image != null"
            class="card_sty"
            title="合作机构资料"
            :headStyle="headStyle"
          >
            <a-card-grid class="tabClassImg_lf">营业执照</a-card-grid>
            <a-card-grid class="tabClassImg_rt">
              <div class="imgDiv">
                <files-box :fileUrl="agentInfoDTO.image" fileTitle="营业执照"></files-box>
              </div>
            </a-card-grid>
            <a-card-grid v-if="legal.imgHead != null" class="tabClassImg_lf">法定代表人身份证</a-card-grid>
            <a-card-grid v-if="legal.imgHead != null" class="tabClassImg_rt">
              <div class="imgDiv">
                <files-box :fileUrl="legal.imgHead" fileTitle="法定代表人身份证正面"></files-box>
              </div>
              <div class="imgDiv" v-if="legal.imgEmblem != null">
                <files-box :fileUrl="legal.imgEmblem" fileTitle="法定代表人身份证反面"></files-box>
              </div>
            </a-card-grid>
            <a-card-grid v-if="bank.isPrivate != false" class="tabClassImg_lf">结算银行账户</a-card-grid>
            <a-card-grid v-if="bank.isPrivate != false" class="tabClassImg_rt">
              <div class="imgDiv">
                <files-box :fileUrl="bank.imgCardno" fileTitle="银行卡正面"></files-box>
              </div>
            </a-card-grid>
            <a-card-grid v-if="bank.isPrivate == false" class="tabClassImg_lf">账户证明</a-card-grid>
            <a-card-grid v-if="bank.isPrivate == false" class="tabClassImg_rt">
              <div class="imgDiv">
                <files-box :fileUrl="agentInfoDTO.publicAccount" fileTitle="账户证明"></files-box>
              </div>
            </a-card-grid>

            <a-card-grid v-if="otherImgs.length > 0" class="tabClassImg_lf">其他材料</a-card-grid>
            <a-card-grid v-if="otherImgs.length > 0" class="tabClassImg_rt">
              <div v-for="(item,index) in otherImgs" :key="index">
                <div class="imgDiv">
                  <files-box :fileUrl="item" fileTitle="其他材料"></files-box>
                </div>
              </div>
            </a-card-grid>
          </a-card>
        </div>
      </div>

      <div style="text-align:center;margin: 20px 0;">
        <!-- <a-button type="primary" style="width: 8vw;" @click="goModify">变更</a-button> -->
      
         <ControlButton 
           style="width: 8vw"
          buttonText='变更' 
          buttonType='primary' 
          toolParams='ACCOUNT_INFORMATION_MODIFICATION' 
          @click="goModify"/>
      </div>
    </a-spin>
    <!-- <a-modal title="信息变更手机短信验证！" v-model="visible" :footer="null">
      <a-form @submit="orgSubmit" :form="form" style="margin:0 auto;">
        <a-form-item v-bind="formItemLayout" label="手机号码">
          <div style="display: flex;align-items: center;">
            <a-hide-data :params="{type:'mobileNo',value: this.query.mobileNo}"></a-hide-data>&nbsp;&nbsp;
            <a-button style="margin-left: 20px;" v-if="issend" @click="getCode" :loading="iconLoading">发送验证码</a-button>
            <a-button style="margin-left: 20px;" v-if="!issend" disabled type="primary">{{ count }}s后发送</a-button>
          </div>
        </a-form-item>
        <a-form-item v-bind="formItemLayout" label="验证码">
          <a-input v-model="query.verCode" name="captcha" placeholder="请输入验证码" />
        </a-form-item>
        <div style="text-align:center;">
          <a-button style="width: 5vw;" htmlType="submit" type="primary">确定</a-button>
        </div>
      </a-form>
    </a-modal>-->
    <a-modal class="modalClass" :visible="visible" @cancel="handleCancel" :footer="null">
      <img class="imgClass" :src="imageSrc" alt />
    </a-modal>
  </div>
</template>

<script>
import AForm from "ant-design-vue/es/form/Form";
import ATabs from "ant-design-vue/es/tabs";
import AFormItem from "ant-design-vue/es/form/FormItem";
import AInput from "ant-design-vue/es/input/Input";
import AIcon from "ant-design-vue/es/icon";
import AInputGroup from "ant-design-vue/es/input/Group";
import AButton from "ant-design-vue/es/button/button";
import ACol from "ant-design-vue/es/grid/Col";
import ARow from "ant-design-vue/es/grid/Row";
import ACheckbox from "ant-design-vue/es/checkbox/Checkbox";
import AAlert from "ant-design-vue/es/alert/index";
import moment from "moment";
import DetailList from "../../../components/tool/DetailList";
import FilesBox from "../../../components/tool/FilesBox";
import { message } from "ant-design-vue";
import api from "@/common/api";
import { error } from "util";
import { fail } from "assert";
import AHideData from "../../common/HideData";
import ControlButton from "@/components/ControlButton"
const ATabPane = ATabs.TabPane;
const DetailListItem = DetailList.Item;

export default {
  name: "orgMyInfo",
  components: {
    AAlert,
    ACheckbox,
    ACol,
    ARow,
    AButton,
    AInputGroup,
    AIcon,
    AInput,
    AFormItem,

    ATabPane,
    ATabs,
    AForm,
    DetailListItem,
    DetailList,
    AHideData,
    FilesBox,
    ControlButton
  },
  data() {
    return {
      headStyle: {
        height: "45px",
        display: "flex"
      },
      imageSrc: "",
      iconLoading: false,
      spinning: true,
      isMerchant: false,
      query: { mobileNo: null, verCode: null },
      name: null,
      type: null,
      phone: null,
      customerOrg: {},
      timer: null,
      count: 60,
      visible: false,
      issend: true,
      form: this.$form.createForm(this),
      error: "",
      login: false,
      legal: {},
      auth: {},
      control: {},
      bank: {},
      agentInfoDTO: { image: null },
      otherImgs: [],
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 20 },
          md: { span: 16 }
        }
      }
    };
  },
  filters: {
    cardNofilter(value) {
      if (value) {
        var reg = /.*(.{4})$/;
        return value.replace(reg, "**** **** **** $1");
      }
    },
    cashfilter(value) {
      return parseFloat(value / 100).toFixed(2);
      // return Number(value).toFixed(2)
    }
  },
  watch: {},
  computed: {},
  mounted() {
    this.init();
  },
  methods: {
    init: function() {
      this.$axios.get("/agent/account/manage/information/my").then(res => {
        console.log("myinfo", res);
        if (res.data.code == "OK") {
          this.spinning = false;
          this.agentInfoDTO = res.data.data.agentInfoDTO; //基本信息
          // this.otherImgs = res.data.data.agentInfoDTO.otherImgs.split(',');
          this.legal = res.data.data.agentInfoDTO.identityLegalDTO; //法定代表人
          this.bank = res.data.data.agentInfoDTO.bankCardDTO; //银行卡账户信息
        } else {
          this.$message.warning(res.data.message);
          this.spinning = false;
        }
      });
    },
    getCode() {
      // if (this.query.mobileNo && !/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.query.mobileNo)) {
      //   this.$message.info("您输入手机号格式有误！");
      //   return;
      // }
      // if(this.query.mobileNo==null){
      //   this.$message.info("请输入手机号");
      //   return false;
      // }
      this.iconLoading = true;

      this.$axios
        .post("/agent/merchant/account/send/mobile/check", {
          mobileNo: this.query.mobileNo
        })
        .then(
          res => {
            this.iconLoading = false;
            // console.log("code",res)
            if (res.data.code == "OK") {
              const TIME_COUNT = 60;
              if (!this.timer) {
                this.count = TIME_COUNT;
                this.issend = false;
                this.timer = setInterval(() => {
                  if (this.count > 0 && this.count <= TIME_COUNT) {
                    this.count--;
                  } else {
                    this.issend = true;
                    clearInterval(this.timer);
                    this.timer = null;
                  }
                }, 1000);
              }
            } else {
              this.$message.warning(res.data.message);
              this.issend = true;
            }
            // this.$message.warning(res.message);
          },
          err => {
            this.iconLoading = false;
            console.log(err);
          }
        );
    },
    handleCancel() {
      this.visible = false;
    },
    goModify() {
      // this.query.verCode = null;
      // this.visible = true;
      this.$router.push("/org/infoset/allinfoChange");
    },
    orgSubmit(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
          this.$axios
            .post("/agent/merchant/account/send/mobile/check", this.query)
            .then(res => {
              console.log("sendmobile", res);
              if (res.data.code == "OK") {
                this.visible = false;
                this.$router.push("/org/infoset/allinfoChange");
              } else {
                this.$message.warning(res.data.message);
              }
            });
        }
      });
    },

    handleOk() {
      this.$router.push("/home");
    },
    gologin() {
      this.visible = false;
      this.$router.push("/home");
    },
    validateCode(rule, value, callback) {
      // let reg = new RegExp('[\\u4E00-\\u9FFF]+', 'g')
      if (value && !/^1(3|4|5|6|7|8|9)\d{9}$/.test(value)) {
        /* eslint-disable-next-line */
        this.phone = false;
        callback("您输入手机号格式有误！");
        return;
      } else {
        if (!value) {
          this.phone = false;
        } else {
          this.phone = true;
          this.phonevalue = value;
        }
        callback();
      }
    },
    validateverCode(rule, value, callback) {
      const reg = new RegExp("^[0-9]{4,10}$");
      if (value && !reg.test(value)) {
        callback("您输入的验证码格式有误！");
      } else {
        this.verCode = value;
      }
      callback();
    },
    imgClick(e) {
      console.log(e);
      console.log(e.target.currentSrc);
      this.imageSrc = e.target.currentSrc;
      this.visible = true;
    }
  }
};
</script>

<style lang="less" scoped>
.card_sty {
  margin-bottom: 30px;
}

.mainContent {
  overflow-y: auto;
  height: 100%;
  padding: 70px;
}

/* 滚动条样式 */
.mainContent::-webkit-scrollbar {
  width: 4px;
  height: 4px;
  scrollbar-arrow-color: red;
}

.mainContent::-webkit-scrollbar-thumb {
  border-radius: 5px;
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: rgba(0, 0, 0, 0.2);
  scrollbar-arrow-color: red;
}

.mainContent::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 0;
  background: rgba(0, 0, 0, 0.1);
}

span {
  cursor: pointer;
}

.formGroupTitle {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 20px;
  text-align: left;
  margin-left: 20px;
}

.ant-tabs-nav {
  float: right;
}

.ant-card-head-title {
  padding: 12px 0 !important;
}

.ant-card-grid {
  padding: 0.5vw;
}

.ant-card-head {
  background: transparent;
  border-bottom: 1px solid #e8e8e8;
  padding: 0 24px;
  border-radius: 2px 2px 0 0;
  zoom: 1;
  margin-bottom: -1px;
  min-height: 45px !important;
  font-size: 16px;
  color: #52506b;
  font-weight: 400;
  display: flex;
}

.ant-card .ant-card-grid:nth-child(4n + 1),
.ant-card .ant-card-grid:nth-child(4n + 2) {
  background: #f7f9fc;
}

.ant-card-grid:hover {
  /* box-shadow: none; */
  box-shadow: 1px 0 0 0 #e8e8e8, 0 1px 0 0 #e8e8e8, 1px 1px 0 0 #e8e8e8,
    1px 0 0 0 #e8e8e8 inset, 0 1px 0 0 #e8e8e8 inset;
}

.imgDiv {
  overflow: hidden;
  width: 8vw;
  height: 8vw;
  margin-left: 0.5vw;
  float: left;
}

.imgClass {
  vertical-align: middle;
  border-style: none;
  width: 100%;
}

.imgStyle {
  width: 8vw;
  height: 8vw;
  cursor: pointer;
}

.tabClass_lf {
  width: 25%;
  text-align: left;
  padding-left: 20px;
}

.tabClass_rt {
  width: 75%;
  text-align: left;
  padding-left: 20px;
}

.tabClassImg_lf {
  width: 25%;
  height: 9vw;
  padding-left: 20px;
  display: flex;
  align-items: center;
}

.tabClassImg_rt {
  width: 75%;
  text-align: left;
  height: 9vw;
}
</style>